<template>
	<my-main title="储值卡余额明细"  isBack :table="table" @search="getTbody" @infoFun="infoFun">
		<template #tableTbody="{ tbody }">
			<my-list :options="tbody">
				<template #item="{ row }">
					<view class="p-16 bg-color-white radius-8">
						<view class="f-32 fwb">{{ row.ClientName }}</view>
						<view class="f-24 text-color-text m-t-12">{{ `最后消费时间 ：${row.LastCostTime || '未消费'}` }}</view>
						<view class="flex bg-color-bg m-t-12 p-16 radius-8">
							<view class="flexAuto flex-c-start-center">
								<view class="countTitle">消费总额</view>
								<view class="countNumber">{{ row.totalAmt }}</view>
							</view>
							<view class="line"></view>
							<view class="flexAuto text-center flex-c-start-center">
								<view class="countTitle">储值卡余额</view>
								<view class="countNumber">{{ row.Balance }}</view>
							</view>
						</view>
						<view class="flex-between-center m-t-12 f-24 text-color-text">
							<text>{{ `销售代表：${row.Saler}` }}</text>
							<text>{{ `所属门店：${row.Department || '--'}` }}</text>
						</view>
					</view>
				</template>
			</my-list>
		</template>
	</my-main>
</template>

<script lang="uts" setup>
//公共状态
import { useVue  } from '@/utils/useVue.uts'
const { reactive, ref,app,Token,onMounted,watch,http,goToPage } = useVue()
//
const scanResult=ref('')
// 表单数据
const formData:any = reactive({
})
// 表单数据
const table:any = reactive({
	loading: false,//数据加载
	search:{
		PageLimit: 10,
		PageIndex: 1,
		Count: 0,
		ClientName: "",
		ClientCode: ""
	},
	searchSet:{
		searchKey:'ClientName',
		// options:[
		// 	{
		// 		label: '客户名称',
		// 		prop: 'ClientName',
		// 		type:'input',
		// 	},
		// ]
	},
	tbody:[],
	summary: [
		{
			label: '余额总额',
			prop: 'SumBalance',
		},
		{
			label: '消费总额',
			prop: 'SumTotalAmt',
		},
	],
})
//搜索
const getsearch = () => {
	table.tbody=[]
	table.search.PageIndex=1
	getTbody()
}
//搜索
const getTbody = (scrollSet?:any) => {
	table.loading=true
	http.request({
		url: 'api/PurchaseOut/CardBalanceRpt',
		data: table.search,
		isNotToken: true,
		success: (res : any) => {
			table.tbody.push(...res.List)
			table.search.Count = res.Count
			if(table.summary?.length>0){
				table.summary.forEach((el:any)=>{
					el.value=res[el.prop]
				})
			}
			_scrollSet()
		},
		fail:()=>{
			_scrollSet()
		}
	})
	function _scrollSet(){
		table.loading=false
		if(scrollSet){
			scrollSet.triggered=false
		}
	}
}
//初始运行
const infoFun = () => {
	getTbody()
}
onMounted(() => {

})
</script>

<style scoped lang="scss">
.class-name {
	font-weight: bold;
}
</style>
